<template>
  <section class="song-list" v-if="songListShow" @click="$emit('hide-list')">
    <div class="song-l" @click.stop="">
      <h1>
        当前播放<span class="song-count"> ({{ songList?.length }}) </span>
      </h1>

      <div class="ablility">
        <div class="model" @click.stop="$emit('change-model')">
          <div class="icon model-icon">
            <i class="iconfont" :class="currentModel.icon"></i>
            <i v-if="currentModel.name === '单曲循环'" class="one">1</i>
          </div>
          <span class="model-name">{{ currentModel.name }}</span>
        </div>

        <div class="icon"><i class="iconfont icon-xiazai1"></i></div>
        <div class="icon"><i class="iconfont icon-wenjianjia"></i></div>
        <div class="icon" @click="$emit('cls-list')">
          <i class="iconfont icon-shanchu"></i>
        </div>
      </div>

      <span v-if="songList.length <= 0" class="nothing">歌单暂无歌曲</span>
      <div class="s-l" v-else>
        <div class="">
          <playing-list-song
            v-for="(item, i) in songList"
            :key="i"
            :item="item"
            :song="song"
            :paused="paused"
            @change-song-from-list="changeSong"
            @del-song-from-list="$emit('del-song-from-list', $event)"
          ></playing-list-song>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import PlayingListSong from "@/components/PlayingListSong.vue";
export default {
  props: ["songList", "song", "songListShow", "paused", "currentModel"],

  data() {
    return {};
  },

  components: {
    PlayingListSong,
  },

  computed: {},

  methods: {
    changeSongFromList(item) {
      this.$emit("change-song-from-list", item);

      if (this.$route.meta.isChangeRoute) {
        this.$router.replace({
          path: "/song",
          query: {
            id: item.id,
          },
        });
      }
    },

    changeSong(item) {
      this.changeSongFromList(item);
    },

    deleteSongFromList(item) {
      if (this.$route.meta.isChangeRoute) {
        this.$router.replace({
          path: "/song",
          query: {
            id: item.id,
          },
        });
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.song-list {
  display: flex;
  justify-content: center;
  align-items: flex-end;

  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;
  z-index: 999;

  background-color: rgba(0, 0, 0, 0.237);
}

.song-l {
  display: flex;
  flex-direction: column;

  width: 94vw;
  height: 60vh;
  margin-bottom: 3vw;
  padding: 20px;

  border-radius: 20px;
  box-sizing: border-box;
  // overflow: auto;

  background-color: #fff;

  .song-count {
    font-weight: 500;
    font-size: 14px;
    color: #999;
  }

  .ablility {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 50px;

    border-bottom: 1px solid #eee;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 20px;
      height: 20px;
      margin: 0 10px;

      color: #999;

      & > i {
        font-weight: 500;
        font-size: 24px;
      }
    }

    .model {
      flex-grow: 1;
      display: flex;
      align-items: center;

      .model-icon {
        position: relative;
        margin: 0 5px 0 0;

        & > i {
          font-size: 20px;
        }

        & .one {
          position: absolute;
          top: 4px;
          left: 6.5px;

          font-size: 12px;
        }
      }

      .model-name {
        flex-grow: 1;
        font-size: 14px;
      }
    }
  }

  .s-l {
    overflow: auto;
    flex: 1;
  }

  .nothing {
    font-size: 20px;
    text-shadow: 1px 1px 2px rgb(175, 175, 175);
    line-height: 60px;
    text-align: center;

    color: #bbb;
  }
}
</style>